<template>
    <Row style="background-color: #FFFFFF;margin: 0 0 5px 0;padding: 4px;" type="flex" align="middle">
      <Col span="1" style="cursor: pointer;">
        <Icon type="ios-arrow-back" :size="25" @click="leftTo"/>
      </Col>
      <Col span="22" ref="tagsRow" style="background-color: #ECEDEF;overflow-x: auto;overflow-x: hidden">
      <div :style="tagDicStyle" ref="tagsDiv" :class="">
        <span v-for="(item,index) in tagList" >
          <Tag :name="index" :key="index" type="dot" closable :color="clickIndex == index ? 'primary' : 'default'" @click.native="click(item,index)" @on-close="remove" >{{item.title}}</Tag>
        </span>
      </div>
      </Col>
      <Col span="1" style="cursor:pointer">
        <Icon type="ios-arrow-forward" :size="25" style="float: right;" @click="rightTo"/>
      </Col>
    </Row>
</template>

<script>
  import {mapState,mapMutations,mapActions} from "vuex";

  export default{
    name : 'wsTags',
    props:{
    },
    computed: {
      ...mapState(['tagList','clickIndex'])
    },
    data(){
      var thiz = this;
      return {
        displacement : 200,
        tagsCol : {
          right : 0,
        },
        tagsDiv : {
          left : 0,
        },
        tagDicStyle : {
          whiteSpace: 'nowrap',
          display: 'inline-block',
          marginLeft : '0px'
        },
      }
    },
    mounted(){
      var thiz = this;
      thiz.getLeft;
      window.onresize = function(){
        thiz.getLeft;
      }
    },
    methods : {
      ...mapMutations(['removeTag','clickTag','changeCurrentView']),
      //获取col和DIV的left位置
      getLeft(){
        this.tagsDiv.left = this.$refs.tagsDiv.$el.getBoundingClientRect().left;
      },
      //左移
      leftTo(){
        var num = this.tagDicStyle.marginLeft.replace('px','');
        this.tagDicStyle.marginLeft = Number(num) + this.displacement+'px';
        if(this.$refs.tagsDiv.getBoundingClientRect().left > this.tagsDiv.left){
          this.tagDicStyle.marginLeft = '0px';
        }
      },
      //右移
      rightTo(){
        if(this.$refs.tagsDiv.getBoundingClientRect().right > this.$refs.tagsRow.$el.getBoundingClientRect().right){
          var num = this.tagDicStyle.marginLeft.replace('px','');
          this.tagDicStyle.marginLeft = Number(num) - this.displacement+'px';
          this.$refs.tagsDiv.getBoundingClientRect().left;
        }
      },
      /**
       * 删除Tag
       */
      remove(event, index){
       this.removeTag(index);

      },
      /**
       * 点击回调
       * @param item
       */
      click(item,index){
        if(item){
          item.index = index;
        }else {
          item = {};
          item.index = index;
        }
        this.clickTag(item);
      }
    }
  }
</script>
<style scoped>
  .ivu-tag-dot {
    height: 26px;
    line-height: 26px;
  }
  .ivu-tag{
    margin: 1px;
  }
</style>
